<template>
    <div class="footer-container">
        <div class="footer-container-round">

            <!--优选职位的表头-->
            <div class="footer-job-excellent-title">
                <span style="font-size: 18px;font-weight: bold;margin-left: 20px">优选职位</span>
                <span style="display: inline-block;font-size: 13px;color: #FF7011;margin-left: 33px;">名企招聘,福利多,待遇好</span>
                <span style="font-size: 13px;display: inline-block;margin-left: 1035px">
                    <el-link :underline="false" style="font-size: 12px;font-weight: bold">更多</el-link>
                    <i class="el-icon-arrow-right"></i>
                </span>
            </div>
            <!--优选职位的内容-->
            <div class="footer-job-excellent-content">
                <table class="footer-job-excellent-common" >
                    <tr v-for="outItem in workJobInfoEntity" >
                        <td v-for="item in outItem" style="position: relative">
                            <span>{{item.workJobName}}</span>
                            <span class="common-date-style">{{item.dayLong}}天前</span>
                            <br>
                            <span class="font-style">{{item.provinces}} | {{item.cityes}} | {{item.areas}}</span>
                            <span class="face-font">{{item.salaryStart}} - {{item.salaryEnd}}</span>
                            <div style="border-top:1px solid #F6F6F6;margin-top: 20px"></div>
                            <br>
                            <span class="font-style">{{item.companyName}}</span>
                        </td>
                    </tr>

                </table>
            </div>
            <!--优秀人才-->
            <div class="footer-person-excellent-title clearfix">
<!--                <div style="background-color: #FF7011">dfdsfds</div>-->
                <span style="font-size: 18px;font-weight: bold;margin-left: 20px">优秀人才</span>
                <span style="font-size: 13px;display: inline-block;margin-left: 1205px">
                    <el-link :underline="false" style="font-size: 12px;font-weight: bold">更多</el-link>
                    <i class="el-icon-arrow-right"></i>
                </span>
            </div>
            <!--优秀人才内容区域-->
            <div class="footer-person-excellent-content">
                <table>
                    <tr v-for="talentItem in talentListData">
                        <td v-for="itemInfo in talentItem">
                            <div class="header_img">
                                <el-avatar
                                    fit="fill"
                                    style="width:70px;height: 70px"
                                     :src="itemInfo.advator">
                                </el-avatar>
                            </div>
                            <div class="person_name">{{itemInfo.talentName}}</div>
                            <div class="person_baseInfo">
                                <span>{{itemInfo.age}}岁 | {{itemInfo.educationBackground}} | {{itemInfo.workJobAge}}年</span><br>
                                <span>毕业大学：{{itemInfo.universityName}}</span>
                            </div>
                            <div class="person_job_info">
                                <span>期望行业:&nbsp;{{itemInfo.expIndustory}}</span>
                                <br>
                                <span>期望地址：{{itemInfo.expAddress}}</span>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
    import clientHomeApi from "@/api/clienthomeApi/clientHomeApi";

    export default {
        name: "main-footer",
        data(){
            return{
                workJobInfoEntity:[],
                talentListData:[]
            }
        },
        mounted() {
            this.excellentWorkJob()
            this.talentLoading()
        },
        methods:{
            /*加载岗位信息*/
            excellentWorkJob(){
                clientHomeApi.excellentWorkJob()
                .then(data => {
                    //console.log("data *********",data)
                    if (data.data.code === 0){
                        let dataArr = data.data.data.slice(0,9)
                        for(var i=0;i<dataArr.length;i+=3){
                            this.workJobInfoEntity.push(dataArr.slice(i,i+3));
                        }
                        //console.log("this.workJobInfoEntity ===>",this.workJobInfoEntity)
                    }
                })
                .catch(err =>{
                    Promise.reject(err)
                })
            },

            /*加载优秀人才信息*/
            talentLoading(){
                clientHomeApi.talentLoading()
                .then(data => {
                    console.log("data talentLoading   ===>",data)
                    if (data.data.code === 0){
                        let dataArr = data.data.data.slice(0,12)
                        for(var i=0;i<dataArr.length;i+=4){
                            this.talentListData.push(dataArr.slice(i,i+4));
                        }
                    }
                })
                .catch(err => {
                    Promise.reject(err)
                })

            }
        }
    }
</script>

<style scoped>
    .footer-container{
        width: 100%;
        /*height: 1000px;*/
       /* background-color: #bfa;*/
    }
    /*解决浮动问题*/
    .footer-container-round::after{
        content: '';
        /* after默认是行内元素，需要修改为块元素 */
        display: block;
        clear: both;
    }
    .footer-container-round{
        width: 1360px;
        /*height: 1800px;      !*调整盒子的高度*!*/
        margin: 0 auto;
       /* background-color: #409EFF;*/
        /*padding: 20px;*/
    }
    /*福利的title*/
    .footer-job-excellent-title{
        width: 100%;
        height: 80px;
        line-height: 80px;
        background-color: #ffffff;
    }
    .footer-job-excellent-content{
        width: 100%;
        /*height: 500px;*/
        margin-top: 10px;
    }
    .footer-job-excellent-content .footer-job-excellent-common{

        float: left;
        width: 100%;
        height: 400px;
        background-color: #ffffff;
        border-collapse: collapse;
    }
    .footer-job-excellent-content .footer-job-excellent-common tr,td{
        border: 1px solid #F8F8F8;
        vertical-align:top;
        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .footer-job-excellent-content .footer-job-excellent-common .common-date-style{
        /*display: inline-block;*/
        position: absolute;
        top: 15px;
        left: 86px;
        margin-left: 280px;
        font-size: 14px;
        color: #C0C4CC;
    }
    .font-style{
        font-size: 12px;
        color: #C0C4CC;
    }
    .face-font{
        position: absolute;
        top: 40px;
        left: 145px;
        display: inline-block;
        margin-left: 162px;
        color: #FF7011;
    }

    /*人才的title*/
    .footer-person-excellent-title{
        float: left;
        width: 100%;
        height: 100px;
        line-height: 100px;
        margin-top: 10px;
        background-color: #ffffff;
    }
    /*人才区域的内容*/
    .footer-person-excellent-content{
        float: left;
        width: 100%;
        margin-top: 10px;
    }
    /*人才信息的内容表格*/
    .footer-person-excellent-content table{
        width: 100%;
        border-collapse: collapse;
    }
    .footer-person-excellent-content tr,td{
        border-collapse: collapse;
        border: 1px solid #F6F6F6;
        background-color: #ffffff;
    }
    .footer-person-excellent-content td{
        /*padding: 20px;*/
        height: 100px;
    }
    /*人才信息的头像*/
    .footer-person-excellent-content .header_img{
        width: 60px;
        height: 60px;
        border: 1px solid transparent;
        border-radius: 50%;
    }
    /*人才信息的名称*/
    .footer-person-excellent-content .person_name{
        position: relative;
        top: -55px;
        left: 75px;
        font-size: 15px;
        font-weight: bold;
    }
    .footer-person-excellent-content .person_baseInfo{
        position: relative;
        top: -45px;
        left: 75px;
        color: #C0C4CC;
        font-size: 13px;
    }
    .footer-person-excellent-content .person_job_info{
        position: relative;
        top: -20px;
        left: 5px;
        font-size: 13px;
        color: #C0C4CC;
    }


    /*猎头顾问 title*/
    .footer-headhunting-title{
        float: left;
        width: 1360px;
        height: 100px;
        line-height: 100px;
        background-color: #ffffff;
        margin-top: 10px;
    }
    .footer-headhunting-content{
        float: left;
        width: 100%;
        margin-top: 10px;
    }
    .footer-headhunting-content table{
        width: 100%;
        border-collapse: collapse;
    }
    .footer-headhunting-content tr,td{
        border-collapse: collapse;
        border: 1px solid #F6F6F6;
        background-color: #ffffff;
    }
    .footer-headhunting-content td{
        position: relative;
        height: 180px;
    }
    .footer-headhunting-content .headhunting-img                                                                        {
        position: relative;
        width: 105px;
        height: 105px;
        background-color: #99a9bf;
    }
/*    .footer-headhunting-content .notes-button{
        position: relative;
        margin-top: 10px;
    }*/
/*    .footer-headhunting-content .headhunting-name{
        position: relative;
        font-size: 14px;
        top: -150px;
        left: 130px;
    }*/
    .footer-headhunting-content .in-font{
        position: absolute;
        left: 0px;
    }
    .footer-headhunting-content .headhunting-base-info{
        position: absolute;
        left: 150px;
        top: 55px;
        font-size: 13px;
    }
</style>
